<template>
  <div class="app-container">
    <avue-crud
      v-model:search="search"
      :page="page"
      :data="pageData?.data"
      :option="option"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchChange"
      @current-change="currentChange"
      @refresh-change="handleQuery"
    >
      <template #address="scope">
        {{
          `${scope.row.address_province || ""}${scope.row.address_city || ""}${scope.row.address_area || ""}${scope.row.address_street || ""}${scope.row.address_detail || ""}`
        }}
      </template>

      <template #bank="scope">
        {{ `${scope.row.bank_name || ""} / ${scope.row.bank_no || ""}` }}
      </template>

      <template #revamp_content="scope">
        {{ scope.row.project_record_arr.projectText }}
      </template>

      <template #company="scope">
        {{ scope.row.project_record_arr.company }}
      </template>

      <template #money="scope">
        {{ scope.row.project_record_arr.money }}
      </template>

      <template #checkMoney="scope">
        {{ scope.row.project_record_arr.checkMoney }}
      </template>

      <template #selfMoney="scope">
        {{ scope.row.project_record_arr.selfMoney }}
      </template>
    </avue-crud>
  </div>
</template>

<script setup lang="ts">
import { PageDataModel } from "@/model/page-data-model";
import options from "./avue-options";
import UserAPI from "@/api/user";
import { UserModel } from "@/model/user-model";
import { PageParamsModel } from "@/model/page-params-model";

defineOptions({
  name: "RevampRoster",
});

onMounted(() => {
  handleQuery();
});

const option = ref(options);
const pageData = ref<PageDataModel<UserModel[]>>();
const loading = ref(false);
const search = ref<PageParamsModel>({
  page: 1,
});
const page = computed(() => {
  return {
    ...pageData.value,
    layout: "total, prev, pager, next, jumper",
  };
});

// 查询
async function handleQuery() {
  loading.value = true;
  UserAPI.getRevampUserList(search.value)
    .then((res: any) => {
      pageData.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * @description 分页切换
 * @param val  当前页码
 */
function currentChange(val: number) {
  search.value.page = val;
  handleQuery();
}
/**
 * 处理搜索变化的函数
 * 当搜索条件变化时，此函数会被调用，通常用于处理搜索前的准备工作和搜索完成后的回调
 *
 * @param {Object} params - 包含搜索条件的参数对象
 * @param {Function} done - 一个回调函数，用于通知搜索操作完成
 */
function searchChange(params: Object, done: Function) {
  search.value = params;
  handleQuery().then(() => {
    done();
  });
}
</script>

<style lang="scss" scoped></style>
